<template>
  <el-dialog
    class="public-dialog"
    title="详情"
    width="836"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="h-[460px]" v-loading="loading">
      <FormTitle title="基础信息" />
      <el-descriptions :column="2">
        <el-descriptions-item label="物流商名称:" label-align="right">{{
          detailData?.logistics_name || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="物流商渠道中文名称:" label-align="right">{{
          detailData?.channel_name || "-"
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1">
        <el-descriptions-item label="渠道API:" label-align="right">{{
          detailData?.channel_api_name || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="备注:" label-align="right">{{
          detailData?.remark || "-"
        }}</el-descriptions-item>
      </el-descriptions>
      <FormTitle title="配置" />
      <!-- <el-button type="primary" text bg class="mb-[8px]">API轨迹配置</el-button> -->
      <!-- <el-radio-group class="mb-[8px]" v-model="radio1"> -->
      <!-- <el-radio-button label="0">API轨迹配置</el-radio-button> -->
      <!-- <el-radio-button label="1">爬取轨迹配置</el-radio-button> -->
      <!-- </el-radio-group> -->

      <div>
        <div
          class="rounded-[8px] border border-solid border-[#eeeef0] p-[8px] flex mb-[8px]"
          v-for="item in detailData?.details || []"
          :key="item"
        >
          <div class="w-[200px]">
            公司货态: {{ item?.sys_status_text || "-" }}
          </div>
          <div class="w-[200px]">
            渠道商货态: {{ item?.api_status_text || "-" }}
          </div>
          <div class="w-[150px]">是否启用: {{ item?.status_text || "-" }}</div>
          <div class="w-[200px]">
            时间规划定义: {{ item?.time_type_text || "-" }}
          </div>
        </div>
      </div>
      <div class="mb-[8px]">&nbsp;</div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import FormTitle from "@/components/Form/FormTitle.vue";
import { cargoStatusDetail } from "../api";

const radio1 = ref("0");
const loading = ref(false);
const props = defineProps({
  id: { type: [String, Number], default: "" },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
});

const emit = defineEmits(["update:modelValue", "refresh", "close"]);

watch(
  () => props.id,
  (val) => {
    nextTick(() => {
      if (val) getDetail(val);
    });
  }
);

const detailData = ref({});
const getDetail = async (id) => {
  try {
    loading.value = true;
    const { data } = await cargoStatusDetail({ id });
    detailData.value = data;
  } catch (e) {
    detailData.value = [];
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const isEdit = computed(() => {
  return !!props.id;
});

const handleClose = async (refresh) => {
  await nextTick();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style scoped lang="scss">
:deep(.el-descriptions__label) {
  color: var(--base-sub-text-color);
}
:deep(.el-descriptions__content) {
  color: var(--base-text-color);
}
</style>
